<template>
    <el-drawer
    :title="this.$t('titles.addWaypoint')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="authorBox"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">

        <div v-show="!closable">
        <previous :param="name"></previous>
        <next :param="name"></next>
        </div>

        <el-form ref="ruleForm"  class="waypointForm">
            <el-form-item class="">
                <div class="flex formItem">
                    <div class="itemLeft">{{this.$t("titles.waypointName")}}</div>
                    <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.waypointName')" v-model="stationForm.stationName"></div>
                </div>
            </el-form-item>

            <el-form-item>
                <div class="flex formItem">
                    <div class="itemLeft">{{ this.$t("titles.waypointType")}}</div>
                    <div class="itemRight">
                        <el-select v-model="stationForm.type" :placeholder="this.$t('placeholder.waypointType')" @change="changeStationType" size="mini" class="stationType" popper-class="selectClass">
                            <el-option
                            v-for="item in stationForm.stationType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-form-item>

            <div class="showMore" v-show="showMore" @click="showMoreBtn">更多设置<i class="el-icon-d-arrow-right moreIcon"></i></div>
            <div v-show="!showMore">
                <!-- 默认站点模式 -->
                <el-form-item class="" v-show="showStationMode">
                    <div class="flex formItem">
                        <div class="itemLeft">{{ this.$t("titles.waypointMode")}}</div>
                        <div class="itemRight">
                            <el-select v-model="stationForm.mode" :placeholder="this.$t('placeholder.waypointMode')" size="mini" class="stationType" popper-class="selectClass">
                                <el-option
                                v-for="item in stationForm.stationMode"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </el-form-item>

                <!-- 站点列表模式 -->
                <el-form-item class="" v-show="showGotoStationMode">
                    <div class="flex formItem">
                        <div class="itemLeft">{{ this.$t("titles.waypointMode")}}</div>
                        <div class="itemRight">
                            <el-select v-model="stationForm.gotoMode" :placeholder="this.$t('placeholder.waypointMode')" size="mini" class="stationType">
                                <el-option
                                v-for="item in this.$store.state.stationList"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </el-form-item>

                <!-- call列表模式 -->
                <el-form-item class="" v-show="showCallStationMode">
                    <div class="flex formItem">
                        <div class="itemLeft">{{ this.$t("titles.waypointMode")}}</div>
                        <div class="itemRight">
                            <el-select v-model="stationForm.callMode" :placeholder="this.$t('placeholder.waypointMode')" size="mini" class="stationType">
                                <el-option
                                v-for="item in this.$store.state.trajectoryList"
                                :key="item.name"
                                :label="item.name"
                                :value="item.name">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </el-form-item>

                <!-- 声音站点模式 -->
                <el-form-item class="" v-show="showVoiceStationMode">
                    <div class="flex formItem">
                        <div class="itemLeft">{{ this.$t("titles.waypointMode")}}</div>
                        <div class="itemRight">
                            <el-select v-model="stationForm.voiceMode" :placeholder="this.$t('placeholder.waypointMode')" size="mini" class="stationType">
                                <el-option
                                v-for="item in stationForm.voiceStationMode"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item class="" v-show="showFrameId">
                    <div class="flex formItem">
                        <div class="itemLeft">frame_id</div>
                        <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.frame_id')" v-model="stationForm.frameId"></div>
                    </div>
                </el-form-item>

                <el-form-item class="" v-show="showSubscribeValue">
                    <div class="flex formItem">
                        <div class="itemLeft">{{ this.$t("titles.pubSubVal")}}</div>
                        <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.pubSubVal')" v-model="stationForm.subscribeValue"></div>
                    </div>
                </el-form-item>

                <!-- <el-form-item class="">
                    <div class="flex formItem">
                        <div class="itemLeft">{{ this.$t("titles.scope")}}</div>
                        <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.scope')" v-model="stationForm.scope"></div>
                    </div>
                </el-form-item> -->

                <!-- <el-form-item class="">
                    <div class="flex formItem">
                        <div class="itemLeft">{{ this.$t("titles.timeout")}}</div>
                        <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.timeout')" v-model="stationForm.timeout"></div>
                    </div>
                </el-form-item> -->

                <el-form-item class="" v-show="showPosition">
                    <div class="localTitle">Positon</div>
                    <div class="flex formItem bottomNone">
                        <div class="localInputItem">
                            <div class="itemLeft">x</div>
                            <div class="itemRight">
                                <input type="text" placeholder="" v-model="stationForm.positionX">
                            </div>
                        </div>

                        <div class="localInputItem">
                            <div class="itemLeft">y</div>
                            <div class="itemRight">
                                <input type="text" placeholder="" v-model="stationForm.positionY">
                            </div>
                        </div>

                        <div class="localInputItem">
                            <div class="itemLeft">z</div>
                            <div class="itemRight">
                                <input type="text" placeholder="" v-model="stationForm.positionZ">
                            </div>
                        </div>
                    </div>
                </el-form-item>

                <el-form-item class="" v-show="showOrientation">
                    <div class="localTitle">Orientation</div>
                    <div class="flex formItem bottomNone">
                        <div class="localInputItem">
                            <div class="itemLeft">x</div>
                            <div class="itemRight">
                                <input type="text" placeholder="" v-model="stationForm.orientationX"  @change="changeOrientation">
                            </div>
                        </div>
                        <div class="localInputItem">
                            <div class="itemLeft">y</div>
                            <div class="itemRight">
                                <input type="text" placeholder="" v-model="stationForm.orientationY"  @change="changeOrientation">
                            </div>
                        </div>
                        <div class="localInputItem">
                            <div class="itemLeft">z</div>
                            <div class="itemRight">
                                <input type="text" placeholder="" v-model="stationForm.orientationZ"  @change="changeOrientation">
                            </div>
                        </div>
                        <div class="localInputItem">
                            <div class="itemLeft">w</div>
                            <div class="itemRight">
                                <input type="text" placeholder="" v-model="stationForm.orientationW"  @change="changeOrientation">
                            </div>
                        </div>
                    </div>
                </el-form-item>
    
                <el-form-item class="" v-show="showYaw">
                    <div class="flex formItem">
                        <div class="itemLeft">Yaw(deg)</div>
                        <div class="itemRight"><input type="text" :placeholder="this.$t('placeholder.yaw')" v-model="stationForm.yaw" @change="changeYaw" @keyup.enter="subUpdate('stationForm')"></div>
                    </div>
                </el-form-item>
            </div>
            <div class="flex formBtns">
                <el-button type="primary" @click="subUpdate('stationForm')">{{ this.$t("buttons.submit")}}</el-button>
            </div>
        </el-form>
    </el-drawer>
</template>

<script>
import next from "./guide/next.vue"
import previous from "./guide/previous.vue"
import { isQuaternionValid, quaternionToYaw, thetaToQuaternion } from '../js/methods'
import { showWaypoint, submitAddWaypoint, getRobotPose } from '../js/waypoint'
export default {
    name: 'stationAdd',
    components:{
        next,
        previous
    },
    data(){
        return{
            drawer: false,
            direction: 'btt',
            closable: false,
            showClose: false,

            name: "waypoint",

            showMore: true,
            stationForm:{
                stationName:'',
                stationType: [{
                    value: 'goal',
                    label: this.$t("waypointsType.goal")
                }, {
                    value: 'dock',
                    label: this.$t("waypointsType.dock")
                }, {
                    value: 'timer',
                    label: this.$t("waypointsType.timer")
                }, {
                    value: 'publisher',
                    label: this.$t("waypointsType.publisher")
                }, {
                    value: 'subscriber',
                    label: this.$t("waypointsType.subscriber")
                }, {
                    value: 'looper',
                    label: this.$t("waypointsType.looper")
                }, {
                    value: 'pubsuber',
                    label: this.$t("waypointsType.pubsuber")
                }, {
                    value: 'cmd_vel_set_sub',
                    label: this.$t("waypointsType.maximumSpeedSetting")
                }, {
                    value: 'cmd_vel',
                    label: this.$t("waypointsType.speedPublisher")
                }, {
                    value: 'shell',
                    label: this.$t("waypointsType.commandPublisher")
                }, {
                    value: 'sound_play',
                    label: this.$t("waypointsType.soundPlay")
                }, {
                    value: 'initial_pose',
                    label: this.$t("waypointsType.initialPose")
                }, {
                    value: 'scan_marker',
                    label: this.$t("waypointsType.chargingPosition")
                }, {
                    value: 'shell_string',
                    label: this.$t("waypointsType.shellCommand")
                }, {
                    value: 'pallet',
                    label: 'Pallet'
                }, {
                    value: 'bias',
                    label: 'Bias'
                }, {
                    value: 'call',
                    label: 'Call'
                }, {
                    value: 'goto',
                    label: 'Goto'
                }],
                type: "goal",
                stationMode:[{
                    value: 'LOOP',
                    label: 'LOOP',
                }, {
                    value: 'LOOP2',
                    label: 'LOOP2'
                }, {
                    value: 'BACK',
                    label: 'BACK'
                }, {
                    value: 'BACK2',
                    label: 'BACK2'
                }, {
                    value: 'NONE',
                    label: this.$t("waypointsType.once"),
                }],
                mode: 'LOOP',
                gotoMode: '',
                callMode: '',
                voiceMode: 'play',
                voiceStationMode:[{
                    value: 'LOOP',
                    label: this.$t("waypointsType.play"),
                }, {
                    value: 'LOOP2',
                    label: this.$t("waypointsType.stop"),
                }, {
                    value: 'BACK',
                    label: this.$t("waypointsType.playOnce"),
                },],
                frameId:'map',
                subscribeValue:'0',
                positionX: 0.0,
                positionY: 0.0,
                positionZ: 0.0,
                orientationX: 0.0,
                orientationY: 0.0,
                orientationZ: 0.0,
                orientationW: 0.0,
                yaw: 0.0,
                // scope: 0.0,
                // timeout: 0.0
            },
            showFrameId: true,
            showSubscribeValue: false,
            showStationMode: true,
            showVoiceStationMode: false,
            showGotoStationMode: false,
            showCallStationMode: false,
            showPosition: true,
            showOrientation: true,
            showYaw:true
        }
    },
    mounted(){
        let guide = window.localStorage.getItem("guide");
        if(guide){
            this.closable = true;
        }
    },
    methods:{
        showMoreBtn:function(){
            var getPose = getRobotPose();
            if(getPose){
                this.showMore = false;
            }
        },

        //选择站点类型
        changeStationType(type){
            let that = this;
            that.showFrameId = false;
            that.showSubscribeValue = false;
            that.showStationMode = true,
            that.showVoiceStationMode = false;
            that.showGotoStationMode = false;
            that.showCallStationMode = false;
            that.showPosition = true;
            that.showOrientation = true;
            that.showYaw = true;
            switch(type){
                case 'goal':
                that.showFrameId = true;
                break;

                case 'pubsuber':
                that.showSubscribeValue = true;
                break;

                case 'sound_play':
                that.showStationMode = false;
                that.showVoiceStationMode = true;
                that.showGotoStationMode = false;
                that.showCallStationMode = false;
                break;

                case 'goto':
                that.showStationMode = false;
                that.showVoiceStationMode = false;
                that.showGotoStationMode = true;
                that.showCallStationMode = false;
                break;

                case 'call':
                that.showStationMode = false;
                that.showVoiceStationMode = false;
                that.showGotoStationMode = false;
                that.showCallStationMode = true;
                break;

                case 'initial_pose':
                that.showFrameId = true;
                break;

                default:
                
                break;
            }
        },

        //改变orientation
        changeOrientation(){
            let that = this;
            let orientation = {
                x: parseFloat(this.stationForm.orientationX),
                y: parseFloat(this.stationForm.orientationY),
                z: parseFloat(this.stationForm.orientationZ),
                w: parseFloat(this.stationForm.orientationW),
            }
            //有效的四元数转换
            if (isQuaternionValid(orientation)){
                let yawRad = quaternionToYaw(orientation);
                let yawDeg = yawRad * 180 / Math.PI;
                that.stationForm.yaw = yawDeg.toFixed(5);
            }else{
                // that.$message({
                //     showClose: true,
                //     message: '四元数不合法',
                //     type: 'warning'
                // });
                this.$notify({
                    title: that.$t("titles.warning"),
                    message: that.$t("messages.QuaternionsNotLegal"),
                    type: 'warning',
                    position: 'top-left',
                    offset: 100
                });
                return
            }
        },

        /**
         * 改变yaw,转换为四元数
         * **/
        changeYaw(){
            let that = this;
            let yawDeg = parseFloat(that.stationForm.yaw);
            let orientation = thetaToQuaternion(yawDeg/180*Math.PI);
            that.stationForm.orientationX = orientation.x.toFixed(5);
            that.stationForm.orientationY = orientation.y.toFixed(5);
            that.stationForm.orientationZ = orientation.z.toFixed(5);
            that.stationForm.orientationW = orientation.w.toFixed(5);
        },

        //提交
        subUpdate() {
            if(this.stationForm.type === "goal"){
                this.stationForm.type = 'goal'
            }
            if(this.stationForm.mode === 'LOOP'){
                this.stationForm.mode = 'LOOP'
            }
            if(this.stationForm.voiceMode === 'play'){
                this.stationForm.voiceMode = 'LOOP'
            }
            submitAddWaypoint(this.stationForm);
      },

      //关闭模态框
      closeDrawer: function(){
          showWaypoint(false)
      }
    },

    //计算属性,小车姿态转换
    watch:{
       '$store.state.robotPosition':function(val){
            this.stationForm.positionX = val.positionX;
            this.stationForm.positionY = val.positionY;
            this.stationForm.positionZ = val.positionZ;
            this.stationForm.orientationX = val.orientationX;
            this.stationForm.orientationY = val.orientationY;
            this.stationForm.orientationZ = val.orientationZ;
            this.stationForm.orientationW = val.orientationW;
            this.stationForm.yaw = val.yaw;
        },

        "$store.state.showAddStation": function(val){
           this.drawer = val;
        },

        "$store.state.guideModule": function(val){
            this.closable = !val;
        }
    }
}
</script>

<style scoped lang="less">
.waypointForm{
    padding: 0 15px;
    .formItem{
        border-bottom: 1px solid #eeeeee;
        .itemLeft{
            flex: 4;
            text-align: left;
        }
        .itemRight{
            flex: 6;
            height: 40px;
            input{
                width: 100%;
                height: 100%;
                display: block;            
            }
            .selectClass{
                display: flex;
                justify-content: center;
                align-items: center
            }
        }
    }
    .bottomNone{
        border-bottom: none;
    }
    .showMore{
        text-align: center;
        color: #409EFF;
        padding-top: 5px;
        .moreIcon{
            transform:rotate(90deg);
            -ms-transform:rotate(90deg);
            -moz-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            -o-transform:rotate(90deg);
        }
    }
     .localTitle{
        text-align: left;
        padding: 10px 0 0 0;
    }
    .localInputItem{
        text-align: center;
        padding: 0 5px;
        .itemLeft{
            text-align: center;
        }
        input{
            border: 1px dashed #eeeeee;
            padding: 5px 0;
            text-align: center;
            margin-top: 5px;
        }
    }
    .stationType{
        input{
            height: 10px;
        }
        .el-input__icon{
            height:inherit
        }
        .el-input__inner{
            height: normal;
            line-height: normal
        }
        width: 100%;
        border: none;
        outline: none;
        padding-left: 0.7em;
        height: 100%;
    }
     .formBtns{
        padding: 0 5px;
        margin-top: 15px;
        button{
            width: 100%;
        }
    }
    .el-form-item{
        margin-bottom: 0;
    }
    .el-form-item__content{
        line-height: 20px;
    }
}
</style>